---
title: Tabs
description: Usage instructions for the Tabs component
---

<PageDescription>

The `<Tabs>` and `<Tab>` components are used together to display and swap
between content. Like all of the MDX components, you’ll need to give the content
you pass in a line of whitespace. When in doubt, follow the examples. Everything
should be left aligned, indenting `<Tab>` will result in errors.

</PageDescription>

## Example

<Tabs>

<Tab label="Just text">

The tab component can be used for a variety of content. From text, to images, to
columns. If you want to have multiple columns, you’ll need to use our `Row` and
`Column` helpers as demonstrated in the "Two images" tab.

</Tab>

<Tab label="Single image">

If your content is full width, you don’t need `Row` and `Column`

![color array](images/colors.jpg)

</Tab>

<Tab label="Two images">

<Row>
<Column colSm={6} colLg={6}>

Column one

![color array](images/colors.jpg)

</Column>
<Column colSm={6} colLg={6}>

Column two

![color array](images/colors.jpg)

</Column>
</Row>

</Tab>

</Tabs>

## Code

<Title>Text</Title>

```mdx path=components/Tabs/Tabs.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/Tabs
// Start with the wrapper component (Tabs)

<Tabs>

<Tab label="Text">

The tab component can be used for a variety of content. From text, to images, to
columns. If you want to have multiple columns, you’ll need to use our `Row` and
`Column` helpers as demonstrated in the "Two images" tab.

</Tab>
```

<Title>Single image</Title>

```mdx path=components/Tabs/Tabs.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/Tabs
<Tab label="Single image">
  If your content is full width, you don’t need `Row` and `Column` ![color
  array](images/colors.jpg)
</Tab>
```

<Title>Multiple images</Title>

```mdx path=components/Tabs/Tabs.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/Tabs
<Tab label="Two images">

<Row>
<Column colSm={6} colLg={6}>

Column one

![color array](images/colors.jpg)

</Column>
<Column colSm={6} colLg={6}>

Column two

![color array](images/colors.jpg)

</Column>
</Row>

</Tab>

// Make sure you close the wrapper component

</Tabs>
```
